{include file=comm/head.html}

<div class="home-page" style="width: 100%;height: 100%;overflow: hidden">
    <div class="menu_control">
        <div class="swiper-container swiper_menu">
            <div class="swiper-wrapper" id="menu_wrapper">
                <div class="swiper-slide swiper-no-swiping">
                    <li><span></span></li>
                </div>
                <div class="swiper-slide swiper-no-swiping">
                    <li><span></span></li>
                </div>
                <div class="swiper-slide swiper-no-swiping">
                    <li><span></span></li>
                </div>
                <div class="swiper-slide swiper-no-swiping">
                    <li><span></span></li>
                </div>
                <div class="swiper-slide swiper-no-swiping">
                    <li><span></span></li>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-container needDot" id="index_page" style="overflow: hidden">
        <div class="swiper-wrapper" id="index_wrapper" style="width: 100%;height: 100%">
            <div  class="swiper-slide slide_ani_normal swiper-slide-index">
                <div class="slide1">
                    <div class="slide1_main swiper-container">
                        <div class="swiper-wrapper" id="slide1_main_wrapper">
                            <div class="swiper-slide">
                                <div class="slide-inner">
                                    <div class="banner_title">
                                        <div class="a1" data-swiper-parallax="-1000">专注于风能产业链</div>
                                        <div class="a2" data-swiper-parallax="-750">配套设备生产商及服务商</div>
                                        <a class="a3" href="" data-swiper-parallax="-500">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                                    </div>
                                    <div class="slide1_son">
                                        <div class="slide1_son_bac">
                                            <img src="{pboot:sitetplpath}/images/home-section_banner-01.png" alt="banner" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-inner">
                                    <div class="banner_title">
                                        <div class="a1" data-swiper-parallax="-1000">专注于风能产业链</div>
                                        <div class="a2" data-swiper-parallax="-750">配套设备生产商及服务商</div>
                                        <a class="a3" href="" data-swiper-parallax="-500">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                                    </div>
                                    <div class="slide1_son">
                                        <div class="slide1_son_bac">
                                            <img src="{pboot:sitetplpath}/images/home-section_banner-02.png" alt="banner" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-inner">
                                    <div class="banner_title">
                                        <div class="a1" data-swiper-parallax="-1000">我们关注科技驱动的</div>
                                        <div class="a2" data-swiper-parallax="-750">可持续能源未来</div>
                                        <a class="a3" href="" data-swiper-parallax="-500">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                                    </div>
                                    <div class="slide1_son">
                                        <div class="slide1_son_bac">
                                            <img src="{pboot:sitetplpath}/images/home-section_banner-03.png" alt="banner" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="banner-pagination"></div>
                </div>
            </div>
            <div class="swiper-slide slide_ani_normal swiper-slide-index">
                <div class="slide2">
                    <div class="s2_main">
                        <div class="left">
                            <div class="a1">致力于推动能源变革</div>
                            <div class="a2">以强大科研创新和最佳业务实践，</div>
                            <div class="a3">将可再生能源的利用效率提升至新高度</div>
                            <div class="a4">润浩科技技术有限公司专业研发、制造、销售 液压产品的现代化企业。公司成立于2015年，所属设计团队从事液压系统设计已有10多年时间，注册资金1000万元， 坐落于成都经济开发工业园区。</div>
                            <a href="" class="a5">了解润浩科技<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                            <div class="count">
                                <div class="count-item">
                                    <div class="label">成立</div>
                                    <div class="num" id="num1">2011</div>
                                    <div class="desc">公司成立与2011年</div>
                                </div>
                                <div class="count-item">
                                    <div class="label">成立</div>
                                    <div class="num" id="num2">3000</div>
                                    <div class="desc">公司成立与2011年</div>
                                </div>
                                <div class="count-item">
                                    <div class="label">注册资金</div>
                                    <div class="num" id="num3">1000</div>
                                    <div class="desc">
                                        <div class="desc">公司总注册资金2000万元</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right needParallax" data-wow-dutrtion="1.5s">
                            <img src="{pboot:sitetplpath}/images/company.png" class="company" alt="company" />
                            <img src="{pboot:sitetplpath}/images/company-logo.png" class="layer" data-depth="0.3" alt="company" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide_ani_normal swiper-slide-index">
                <div class="slide3">
                    <div class="category-menu swiper-no-swiping">
                        <div class="category-menu-item category-menu-item_on" data-index="0">
                            <div class="line"></div>
                            <div class="text">液压系统</div>
                        </div>
                        <div class="category-menu-item" data-index="1">
                            <div class="line"></div>
                            <div class="text">液压系统</div>

                        </div>
                        <div class="category-menu-item" data-index="2">
                            <div class="line"></div>
                            <div class="text">摩擦片</div>
                        </div>
                        <div class="category-menu-item" data-index="3">
                            <div class="line"></div>
                            <div class="text">工具类别</div>
                        </div>
                    </div>
                    <div class="products">
                        <div class="a1">更专业的技术，更智慧的选择</div>
                        <div class="a2">专业的液压系统设计团队，稳定的人员组成，长期设计各类紧凑型的液压系统，对液压系统阀块的插装回路设计有丰富的经验，从最开始使用较多的海德福斯、派克，到现在逐渐转换为SUN的插装阀，都经历了长期的实践检验。讯</div>
                        <div class="slide3_main swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="product-group">
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/product1.png" alt="product1" />
                                            </div>
                                        </a>
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/product2.png" alt="product2" />
                                            </div>
                                        </a>

                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/product3.png" alt="product3" />
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="product-group">
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-01.png" alt="product1" />
                                            </div>
                                        </a>
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-02.png" alt="product2" />
                                            </div>
                                        </a>

                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-03.png" alt="product3" />
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="product-group">
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-01.png" alt="product1" />
                                            </div>
                                        </a>
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-02.png" alt="product2" />
                                            </div>
                                        </a>

                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-03.png" alt="product3" />
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="product-group">
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-01.png" alt="product1" />
                                            </div>
                                        </a>
                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-02.png" alt="product2" />
                                            </div>
                                        </a>

                                        <a href="__APP__/news/{$vo.pid}_{$vo.id}">
                                            <div class="slide3_son">
                                                <img src="{pboot:sitetplpath}/images/bg-03.png" alt="product3" />
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="a3">
                            <a href="__APP__/news">查看所有产品<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide_ani_normal swiper-slide-index">
                <div class="slide4">
                    <div class="left">
                        <div class="left-container">
                            <img src="{pboot:sitetplpath}/images/stack-white.png" alt="" class="stack-white"/>
                            <div class="a1">创新&研发</div>
                            <div class="a2">制动器的维修及改造，对漏油或者损坏的制动器可视情况进行 修复；如果风场制动器工作状态不理想，我公司也可以对风场 的制动器进行技术改造，以全新的新型制动器替代工作状态不 理想的旧制动器。</div>
                            <a href="__APP__/news" class="a3">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <div class="right-top-container">
                                <div class="a1">产品服务</div>
                                <a href="__APP__/news" class="a3">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                            </div>
                        </div>
                        <div class="right-bottom">
                            <div class="right-bottom-container">
                                <div class="a1">技术&支持</div>
                                <a href="__APP__/news" class="a3">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide_ani_normal swiper-slide-index">
                <div class="slide5">
                    <div class="left">
                        <img src="{pboot:sitetplpath}/images/news-left.png" alt="" />
                        <div class="left-container">
                            <div class="a1">NEWS</div>
                            <div class="a2">新闻动态</div>
                        </div>
                    </div>
                    <div class="middle">
                        <img src="{pboot:sitetplpath}/images/news-middle.png" alt="" />
                        <div class="middle-container">
                            <div class="a1">2022-03-10</div>
                            <div class="a2">Nibh id faucibus sed consectetur</div>
                            <div class="a3">Et accumsan, nec, lobortis in viverra nisi cras aliquet morbi. Amet ac ultricies pulvinar ridiculus consequat tellus, at tristique.</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <img src="{pboot:sitetplpath}/images/news-right1.png" alt="" />
                            <div class="right-top-container">
                                <div class="a1">2022-03-10</div>
                                <div class="a2">Nibh id faucibus sed consectetur</div>
                                <div class="a3">Et accumsan, nec, lobortis in viverra nisi cras aliquet morbi. Amet ac ultricies pulvinar ridiculus consequat tellus, at tristique.</div>
                                <a href="__APP__/news" class="a4">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                            </div>
                        </div>
                        <div class="right-bottom">
                            <img src="{pboot:sitetplpath}/images/news-right2.png" alt="" />
                            <div class="right-bottom-container">
                                <div class="a1">2022-03-10</div>
                                <div class="a2">Nibh id faucibus sed consectetur</div>
                                <div class="a3">Et accumsan, nec, lobortis in viverra nisi cras aliquet morbi. Amet ac ultricies pulvinar ridiculus consequat tellus, at tristique.</div>
                                <a href="__APP__/news" class="a4">了解更多<img src="{pboot:sitetplpath}/images/arrow-right-line.png" alt="" class="arrow-right-line"/></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide_ani_normal swiper-slide-index" style="height: auto">
                <footer>
                    <div class="footer-part">
                        <div class="content">
                            <div class="nav">
                                <div class="nav-item">
                                    <div class="parent">
                                        <span>产品&服务</span>
                                    </div>
                                    <div class="line"></div>
                                    <div class="child">
                                        <div>液压系统</div>
                                        <div>制动器</div>
                                        <div>摩擦片</div>
                                        <div>工具类</div>
                                    </div>
                                </div>
                                <div class="nav-item">
                                    <div class="parent">
                                        <span>工程案例</span>
                                    </div>
                                    <div class="line"></div>
                                    <div class="child">
                                        <div>液压系统及备件</div>
                                        <div>油液品质传感器</div>
                                        <div>制动器、摩擦片</div>
                                        <div>风场技改</div>
                                    </div>
                                </div>
                                <div class="nav-item">
                                    <div class="parent">
                                        <span>关于我们</span>
                                    </div>
                                    <div class="line"></div>
                                    <div class="child">
                                        <div>企业介绍</div>
                                        <div>发展历程</div>
                                        <div>企业理念</div>
                                        <div>资质荣誉</div>
                                        <div>合作客户</div>
                                    </div>
                                </div>
                                <div class="nav-item">
                                    <div class="parent">
                                        <span>新闻动态</span>
                                    </div>
                                    <div class="line"></div>
                                    <div class="child">
                                        <div>公司动态</div>
                                        <div>行业新闻</div>
                                    </div>
                                </div>
                                <div class="nav-item">
                                    <div class="parent">
                                        <span>职业发展</span>
                                    </div>
                                    <div class="line"></div>
                                    <div class="child">
                                        <div>人才理念</div>
                                        <div>岗位招聘</div>
                                    </div>
                                </div>
                                <div class="nav-item">
                                    <div class="parent">
                                        <span>联系我们</span>
                                    </div>
                                    <div class="line"></div>
                                    <div class="child">
                                        <div>来访路线</div>
                                        <div>联系方式</div>
                                    </div>
                                </div>
                            </div>
                            <a href="/">
                                <img class="logo" src="{pboot:sitetplpath}/images/runhao-footer-logo.png" alt="logo" />
                            </a>
                        </div>
                        <div class="website-info">
                            <div class="w0">
                                <span class="w1">Medical Information</span>
                                <span class="w2">Site Map</span>
                                <span class="w3">rivacy Policy</span>
                                <span class="w4">Terms of Use</span>
                            </div>
                            <div class="bottom">
                                <div class="w5">© 2021 All Rights Reserved Vastwind Science and Technology Co.,Ltd</div>
                                <div class="w6">
                                    <div class="icon-wrap">
                                        <img class="tel" src="{pboot:sitetplpath}/images/tel.png" alt="tel" />
                                    </div>
                                    <div class="icon-wrap">
                                        <img class="sina" src="{pboot:sitetplpath}/images/sina.png" alt="sina" />
                                    </div>
                                    <div class="icon-wrap">
                                        <img class="qq" src="{pboot:sitetplpath}/images/qq.png" alt="qq" />
                                    </div>
                                    <div class="icon-wrap">
                                        <img class="wechat" src="{pboot:sitetplpath}/images/wechat.png" alt="wechat" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>
</div>
{include file=comm/foot.html}
<script>
    $(".needParallax").parallax({});
    $(".menu").removeClass("menu_on");
    if(window.innerWidth<=1200){
        $(".slide_ani_normal").attr("id","ani_slide_mobile");
    }
    $(window).load(function () {
        var swiper_menu = new Swiper('.swiper_menu',{
            speed:700,
            direction: 'vertical',
            centeredSlides:true,
            slidesPerView: 5,
            on:{
                init:function () {

                },
                slideChange: function(){
                    $(".menu_control").removeClass("menu_control_black")
                    if(this.activeIndex == 1 || this.activeIndex == 4){
                        $(".menu_control").addClass("menu_control_black");
                    }
                    $(".header").removeClass("header-on")
                    if(this.activeIndex == 1 || this.activeIndex == 4 || this.activeIndex == 5){
                        $(".header").addClass("header-on");
                    }
                }
            }
        });
        var index_swiper = new Swiper('#index_page', {
            direction: 'vertical',
            speed:600,
            slidesPerView: 'auto',
            autoHeight: true,
            mousewheel: {
                releaseOnEdges: true,
            },
            pagination: {
                el: '.index_dot',
                clickable: true,
            },
            on:{
                slideChange: function(){
                    if(this.activeIndex!=0){
                        $(".menu").addClass("menu_on")
                    }
                    else{
                        $(".menu").removeClass("menu_on")
                    }
                    swiper_menu.slideTo(this.activeIndex,700,false);
                },
                init:function(index_swiper){
                    slide=this.slides.eq(0);
                    slide.addClass('ani_slide');
                },
                transitionStart: function(){
                    for(i=0;i<this.slides.length;i++){
                        slide=this.slides.eq(i);
                        slide.removeClass('ani_slide');
                    }
                },
                transitionEnd: function(){
                    slide2=this.slides.eq(this.activeIndex);
                    slide2.addClass('ani_slide');
                }
            }
        });
        var slide3_main = new Swiper('.slide3_main', {
            speed: 600,
            slidesPerView: 1, // 每次只显示一组
            spaceBetween: 10,
            direction: 'vertical',
            nested:true,
            on:{
                slideChange: function(){
                    let target = this.activeIndex
                    $(".category-menu-item").removeClass("category-menu-item_on")
                    $('.category-menu-item').eq(target).addClass('category-menu-item_on')
                },
            }
        });
        $(".category-menu-item").click(function () {
            let target = $(this).attr('data-index')
            slide3_main.slideTo(target);
        })
        var interleaveOffset = 1;
        var slide1_main = new Swiper('.slide1_main',{
            speed:800,
            nested:true,
            loop:true,
            resistanceRatio: 0,
            watchSlidesProgress: true,
            autoplay:{
                delay: 5000,
            },
            pagination: {
                el: '.banner-pagination',
                clickable: true,
            },
            on: {
                progress: function() {
                    var swiper = this;
                    for (var i = 0; i < swiper.slides.length; i++) {
                        var slideProgress = swiper.slides[i].progress;
                        var innerOffset = swiper.width * interleaveOffset;
                        var innerTranslate = slideProgress * innerOffset;
                        swiper.slides[i].querySelector(".slide-inner").style.transform =
                            "translate3d(" + innerTranslate + "px, 0, 0)";
                    }
                },
                touchStart: function() {
                    var swiper = this;
                    for (var i = 0; i < swiper.slides.length; i++) {
                        swiper.slides[i].style.transition = "";
                    }
                },
                setTransition: function(speed) {
                    var swiper = this;
                    for (var i = 0; i < swiper.slides.length; i++) {
                        swiper.slides[i].style.transition = speed + "ms";
                        swiper.slides[i].querySelector(".slide-inner").style.transition =
                            speed + "ms";
                    }
                }
            }
        });
        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
        };
        //目标元素的ID 滚动开始的数字 滚动结束的数字 完成整个效果的时间
        var num1 = new CountUp('num1', 0, 2011, 0, 1.5, options);
        if (!num1.error) {
            num1.start();
        } else {
            console.error(num1.error);
        }
        //目标元素的ID 滚动开始的数字 滚动结束的数字 完成整个效果的时间
        var num2 = new CountUp('num2', 0, 3000, 0, 1.5, options);
        if (!num2.error) {
            num2.start();
        } else {
            console.error(num2.error);
        }
        //目标元素的ID 滚动开始的数字 滚动结束的数字 完成整个效果的时间
        var num3 = new CountUp('num3', 0, 1000, 0, 1.5, options);
        if (!num3.error) {
            num3.start();
        } else {
            console.error(num3.error);
        }
    })
</script>
<style>
    html, body {
        position: relative;
        height: 100%;
        overflow: hidden;
    }
    body {
        background: #eee;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    /*#menu_wrapper{*/
    /*transition-timing-function:  cubic-bezier(1,0,.5,0.95);*/
    /*}*/
    #index_wrapper{
        transition-timing-function:  cubic-bezier(1,0,.5,0.95);
    }
</style>
